<template>
  <div class="studentDormitory">
    <EditDialog></EditDialog>
    <el-select
      v-model="classvalue"
      filterable
      placeholder="请输入班级"
      @visible-change="remoteMethod"
      @change="selectclass"
      :loading="loading">
      <el-option
        v-for="item in classoptions"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>
    <el-table v-loading="loading" :data="tabledata" style="width: 100%" height="100%" border>
        <el-table-column prop="headimgurl" label="头像" width="200" align="center">
          <template slot-scope="scope">
            <el-avatar shape="square"
                       :size="50"
                       fit="contain"
                       :src="scope.row.headimgurl">
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="class" label="班级">
        </el-table-column>
        <el-table-column prop="productUrl" label="项目地址">
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="handleShow"
              >查看</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
          </template>
        </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import EditDialog from "../../../components/dialog"
  import {getStuList,getClassList} from "../../../api/index"
  export default{
    data () {
      return {
        tabledata:[],
        loading:false,
        classvalue:"",
        classoptions:[]
      }
    },
    methods: {
      update(params){
        if(!params){
          getStuList()
          .then(res=>{
            if(res.data.state){
              this.tabledata=res.data.data
            }
          })
        }else{
          getStuList(params)
          .then(res=>{
            if(res.data.state){
              this.tabledata=res.data.data
            }
          })
        }
      },
      remoteMethod(){
        getClassList()
        .then(res=>{
          this.classoptions=res.data.data
        })
      },
      selectclass(){
        const params={class:this.classvalue}
        this.update(params)
      },
      handleShow(){

      },
      handleEdit(index,row){
        this.$bus.$emit("showdialog",row)
      },
      handleDelete(){

      }
    },
    mounted () {
      this.update(),
      this.remoteMethod(),
      this.$bus.$on("editupdate",()=>{
        if(this.classvalue){
          const params={class:this.classvalue}
          this.update(params)
        }else{
          this.update()
        }
      })
    },
    components: {
      EditDialog
    }
  }
</script>
<style>
.studentDormitory{
  height: 500px;
}
</style>